<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //绘制大圆：必须知道大圆的圆心x，y,大圆的半径
    var bigX = 400;
    var bigY = 300;
    var bigR = 120;


    //开启定时器--实现动画
    var timerId = setInterval(function () {
        ctx.clearRect(0,0,canvas.width,canvas.height);


        ctx.beginPath();
        ctx.arc(bigX, bigY, bigR + 40, 0, 2 * Math.PI);
        ctx.lineWidth = 10;
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(bigX, bigY, bigR, 0, 2 * Math.PI);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#335F9A";
        ctx.stroke();

        //2、绘制刻度线

        drawLines();

        //3、获取当前时间
        var data = new Date();
        var h = data.getHours();//时
        var hRadian = h % 12 * 2 * Math.PI / 12 - Math.PI / 2;
        var m = data.getMinutes();//分
        var mRadian = m % 60 * 2 * Math.PI / 60 - Math.PI / 2;
        var s = data.getSeconds();//秒
        var sRadian = s % 60 * 2 * Math.PI / 60 - Math.PI / 2;


        drawTimeLine(100, sRadian, "orange");//秒针
        drawTimeLine(50, mRadian);//时针
        drawTimeLine(70, hRadian);//分针
    }, 1000);

    //绘制指针函数
    function drawTimeLine(lineLength, radian, color) {
        var h = lineLength * Math.sin(radian);
        var b = lineLength * Math.cos(radian);
        var x = bigX + b;
        var y = bigY + h;

        ctx.beginPath();
        ctx.moveTo(bigX, bigY);
        ctx.lineTo(x, y);
        ctx.strokeStyle = color || "black";
        ctx.stroke();
    }



//绘制刻度线函数
    function drawLines() {
        var bigN = ["Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", "Ⅶ", "Ⅷ", "Ⅸ", "Ⅹ", "ⅩⅠ", "ⅩⅡ"];
        var j = -1;
        for (var i = 0; i < 60; i++) {
            if (i % 5 == 0) {
                //绘制大刻度线
                j++;
                drawLine(radian, 30, "black", 10, bigN[j]);
            } else {
                //绘制小刻度线
                drawLine(radian, 10, "black", 3);
            }
            radian += 2 * Math.PI / 60;
        }
    }
    function drawLine(radian, length, color, lineWidth, text) {
        ctx.beginPath();
        var h = Math.sin(radian) * (bigR - length);//小圆中三角的高度
        var b = Math.cos(radian) * (bigR - length);//小圆中三角的宽度
        var smallX = bigX + b;
        var smallY = bigY + h;

        var h2 = Math.sin(radian) * (bigR);//大圆中三角的高度
        var b2 = Math.cos(radian) * (bigR);//大圆中三角的宽度
        var smallX2 = bigX + b2;
       var smallY2 = bigY + h2;

        //绘制刻度线
        ctx.strokeStyle = color;
        ctx.lineWidth = lineWidth;
        ctx.moveTo(smallX, smallY);
        ctx.lineTo(smallX2, smallY2);
        ctx.stroke();


        var h3 = Math.sin(radian - Math.PI / 6) * (bigR - length + 46);//小圆中三角的高度
        var b3 = Math.cos(radian - Math.PI / 6) * (bigR - length + 46);//小圆中三角的宽度
        var smallX3 = bigX + b3;
        var smallY3 = bigY + h3;
        if (text) {
            ctx.beginPath();
            ctx.fillStyle = "blue";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText(text, smallX3, smallY3);

        }
    }
    var bigLength = 30;
    var smallLength = 10;
    var radian = -Math.PI / 6;
</script>
</html>